<template>
    <Layout>
        <!-- 头部 -->
        <div class="TopBanner">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">数据驱动 智慧生活</p>
                        <h2 class="Banner-Zhong">让API数据服务</h2>
                        <h2 class="Banner-Bot">成为您创新的引擎</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                            <button class="BannerBotBtn-1" @click="ShowNow">立即查看</button>
                            <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情 -->
        <div class="ProductDetails">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <div class="PdtDetailTop">
                            <span @click="gotopro" style="cursor: pointer;">产品中心/</span>
                             <span class="pdtdetSpan">短信API服务</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="3" :xs="8" :sm="24" :md="3" :lg="3">
                        <div class="PdtDetailLeft">
                            <img src="../assets/images/banner/p-pdetail.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="21" :xs="24" :sm="24" :md="21" :lg="21">
                        <div class="PdtDetailRight">
                            <div class="PDetailRTop">
                                <span class="PDRTopOne">短信API服务</span>
                                <span class="PDRTopTwo">
                                    <i class="el-icon-office-building"></i>
                                    企业专用</span>

                            </div>
                            <p class="PDRTopThree">支持三大运营商，虚拟运营商短信发送，电信级运维保障，独享专用通道，3秒可达，99.99%到达率，支持大容量高并发，超低资费</p>
                            <div class="PDRTopFour">
                                <span class="PDRTopFour-r">¥</span><span class="PDRTopFour-H">10</span><span
                                    class="PDRTopFour-buy">(自购买起有效期12个月)</span>
                            </div>
                            <div class="PDRTopFive">
                                <span>规则:</span>
                                <div>
                                    <el-radio v-model="radio" :label="frequen.id" border v-for="frequen in ChangeFre"
                                        :key="frequen.id">{{
                                            frequen.name }}</el-radio>
                                    <!-- <el-radio v-model="radio" label="2" border>备选项2</el-radio> -->
                                </div>
                            </div>
                            <div class="PDRTopSix" @click="gotozixun">
                                立即咨询
                            </div>
                        </div>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="24">
                        <div class="ProDucFuntion">
                            产品功能
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="功能介绍" name="1">
                                <el-col :span="24">
                                    <div class="PrDuFunBox">
                                        <div class="PrDuFunBOne" v-for="PdList in PDFBoxList" :key="PdList.id">
                                            <img src="../assets/images/banner/p-dian.png" alt="">
                                            <p class="pedu-a1">{{ PdList.news }}</p>
                                        </div>
                                        <p>适用于各类网站、APP等短信验证码、通知短信等，自助化短信内容报备，申请即可使用。自定义签名、99%到达率、3秒送达、专业的客服团队保驾护航。</p>
                                        <ol>
                                            <li>短信内容支持变量，支持动态参数，如：短信验证码、短信内容等。</li>
                                            <li>企业用户只能发送实名认证旗下企业的应用，如需发送第三方公司名下产品，需联系销售经理或客服提供相关授权书方可发送 。</li>
                                            <li>应运营商网关要求：发送的短信签名必须与实名认证关联匹配， 2、3、区块链、币类产品签名不支持发送。</li>
                                            <li>目前金融类需要对应产品金融牌照，营业执照，ICP备案信息（可证明是xx公司名下），以及和锦锐的短信协议。</li>

                                        </ol>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="措施建议" name="2">
                                <el-col :span="24">
                                    <div class="CuoShiJy">
                                        <ul class="CuoShiJyul">
                                            <li>有效的图片验证(图形、滑动拼图验证码、减少被轰炸机识别的可能性)及不低于60S倒计时。</li>
                                            <li>限制每天单个IP请求次数。一般业务建议10条以内。支付型业务可根据每天最多进出款次数自行调整。</li>
                                            <li>限制单个号码一分钟内和一小时内的获取次数。一般业务建议一分钟内不超过1条，一小时内不超过3条。</li>
                                            <li>帐号绑定IP地址。（可绑定多个IP地址）。</li>
                                            <li>开设余额提醒功能。</li>
                                            <li>请检查是否有能被http调用的漏洞，或者已经弃用但仍可以触发短信的页面。请根据上述提供异常下发号码来查找异常来源并解决。</li>
                                            <li>APP端建议采用秘钥签名校验请求合法性。</li>
                                            <li>由于短信轰炸机可以模拟IP且取用随机号码，所以在进行整改时不要只限制IP和单号码发送次数，因为这样无法限制大量号码异常下发。</li>

                                        </ul>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="功能示例" name="3">
                                <el-col :span="24" class="FunctExam">
                                    <el-col :span="6">
                                        <img src="../assets/images/banner/gongnengsl.png" alt="">
                                    </el-col>
                                    <el-col :span="18">
                                        <img src="../assets/images/banner/gnshilir.png" alt="">
                                    </el-col>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="业务场景" name="4">
                                <el-col :span="24" class="BussScenario">
                                    <el-col :span="8">
                                        <div class="Business">
                                            <img src="../assets/images/banner/yewu1.png" alt="">
                                            <h6>网站/APP</h6>
                                            <p>适用于网站/APP用户注册、登录、找回密码、支付等需要验证手机号码的环节。</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="Business">
                                            <img src="../assets/images/banner/yewu2.png" alt="">
                                            <h6>短信验证</h6>
                                            <p>在用户注册或者需要发送短信时，发送短信验证码以验证用户手机号码的有效性和归属</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="Business">
                                            <img src="../assets/images/banner/yewu3.png" alt="">
                                            <h6>交易确认</h6>
                                            <p>在金融交易或重要操作（如转账、支付）中，通过短信验证用户的身份以增加安全性。</p>
                                        </div>
                                    </el-col>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="使用流程" name="5">
                                <el-col :span="24" style="padding: 0px 10%;margin: 20px 0;">
                                    <el-col :span="6">
                                        <div class="StepBox">
                                            <img src="../assets/images/banner/step1.png" alt="">
                                            <h5>登录和注册</h5>
                                            <p class="StepBp">在平台上先注册然后登录您的账户</p>
                                            <span class="StepBp2">立即注册></span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="StepBox">
                                            <img src="../assets/images/banner/step2.png" alt="">
                                            <h5>申请和认证</h5>
                                            <p class="StepBp">申请所选的API，并进行实名认证和相关认证</p>
                                            <span class="StepBp2">接口认证></span>
                                            <span class="StepBp2">实名认证></span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="StepBox">
                                            <img src="../assets/images/banner/step3.png" alt="">
                                            <h5>试用和测试</h5>
                                            <p class="StepBp">在购买前，测试API以确认它是否满足需求</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="StepBox">
                                            <img src="../assets/images/banner/step4.png" alt="">
                                            <h5>购买和使用</h5>
                                            <p class="StepBp">充值购买后，在应用或系统中集成和使用API</p>
                                            <span class="StepBp2">账户充值></span><span class="StepBp2">在线购买></span>
                                        </div>
                                    </el-col>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="服务保障" name="6">
                                <el-col :span="24" style="padding: 20px 10%;">

                                    <el-col :span="24">
                                        <el-col :span="12">
                                            <div class="GuateBox">
                                                <img src="../assets/images/banner/guatee1.png" alt="">
                                                <div>
                                                    <h6>可靠安全</h6>
                                                    <p class="GuateBoxtip">提供高可用、低延迟的服务，实施严格的安全措施，确保业务的稳定运行和数据安全。</p>
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="GuateBox">
                                                <img src="../assets/images/banner/guatee2.png" alt="">
                                                <div>
                                                    <h6>服务专业</h6>
                                                    <p class="GuateBoxtip">专业团队提供全方位的售前和售后服务，随时解决您的疑问和问题。</p>
                                                </div>
                                            </div>
                                        </el-col>

                                    </el-col>
                                    <el-col :span="24">
                                        <el-col :span="12">
                                            <div class="GuateBox">
                                                <img src="../assets/images/banner/guatee3.png" alt="">
                                                <div>
                                                    <h6>数据合规</h6>
                                                    <p class="GuateBoxtip">提供高可用、低延迟的服务，实施严格的安全措施，确保业务的稳定运行和数据安全。</p>
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="GuateBox">
                                                <img src="../assets/images/banner/guatee4.png" alt="">
                                                <div>
                                                    <h6>灵活持续</h6>
                                                    <p class="GuateBoxtip">提供多样接口，并持续更新，以满足您不断变化的业务和商业需求。</p>
                                                </div>
                                            </div>
                                        </el-col>

                                    </el-col>
                                </el-col>

                            </el-tab-pane>

                        </el-tabs>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="24">
                        <div class="InterDocument">
                            接口文档
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-tabs v-model="activeNameTwo">
                            <el-tab-pane label="接口文档" name="1">
                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">发送短信：</span><span class="InterDb2"></span>
                                </div>
                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">接口地址：</span><span
                                        class="InterDb2">http://192.168.0.26:8888/order/creationOrder</span>
                                </div>
                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">请求方式：</span><span class="InterDb2">post</span>
                                </div>
                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">返回类型：</span><span class="InterDb2">json</span>
                                </div>

                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">接口描述：</span><span
                                        class="InterDb2">接口返回成功不代表接收成功,接口提交成功计费，具体接收状态只能由运营商查询；运营商限制同1个号码同1个签名的内容1分钟内只能接收1条，10分钟3条,1小时内4条，一天20条，否则可能会被运营商屏蔽，短信api接口本身不限制发送频率，具体发送频率需要用户自行设置，只限国内手机号。请务必添加图片验证码等防恶意攻击的机制，以防短信轰炸,营销内容最后加回T退订，营销短信发送时间为：8：30至21:30。营销内容有防钓鱼机制，请勿单条发送，移动20条起(循环调用)，联电不限制。,字数限制：短信内容（包含签名）小于等于70个字符为计费1条。超过70个字符为长短信，按每67个字</span>
                                </div>
                                <div class="InterDocBoxOne">
                                    <span class="InterDb1">接口调试：</span><span class="InterDb2">API测试工具</span>
                                </div>
                                <div class="InterDocBoxOne" v-for="interDb in InterDocBoxOneList" :key="interDb.id">
                                    <span class="InterDb1">{{ interDb.InterName }}</span>
                                    <p class="InterDb3" v-html="interDb.textContent">

                                    </p>
                                </div>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="InterDocument">
                                            示例代码
                                        </div>
                                    </el-col>
                                    <el-row>
                                        <div class="InterDocBoxOne">
                                            <span class="InterDb1">完整示例代码分享：</span>
                                            <p class="InterDb3">NULL</p>
                                        </div>
                                        <div class="InterDocBoxOne">
                                            <span class="InterDb1">常见问题：</span>
                                            <div class="InterDb3">
                                                <h5>1.认证与授权问题</h5>
                                                API密钥无效或过期：确保你使用的API密钥是有效的，并且没有过期或被吊销。<br>
                                                权限不足：检查你是否拥有访问特定API端点所需的权限或角色。<br>
                                                <h5>2.请求格式问题</h5>
                                                请求参数错误：检查API文档，确保你的请求参数和格式与API要求一致。<br>
                                                请求体格式不正确：对于POST或PUT请求，确保请求体格式符合API的要求（例如JSON或XML格式）。<br>
                                                <h5>3.错误处理</h5>
                                                错误码解析：理解API返回的错误码（如404, 500等）并根据文档进行相应处理。<br>
                                                异常处理：处理可能出现的网络异常、超时等问题。<br>
                                                <h5>4.速率限制</h5>
                                                请求频率超限：了解API的速率限制（例如每秒或每分钟的请求次数），并确保你的请求不超出限制。<br>
                                                <h5>5.数据解析问题</h5>
                                                响应数据格式不一致：检查API文档，确认响应数据格式与文档描述的一致。<br>
                                                数据丢失或错误：如果返回的数据不符合预期，可能需要检查请求是否正确，或者与API提供商联系。<br>
                                                <h5>6.版本控制</h5>
                                                API版本不兼容：确保你使用的API版本与文档中描述的一致，避免使用过时的API版本。<br>
                                                <h5>7.网络连接问题</h5>
                                                网络不稳定：确保你的网络连接稳定，并且可以正常访问API服务。<br>
                                                DNS解析问题：检查API的域名解析是否正确。<br>
                                                <h5>8.安全性问题</h5>
                                                数据泄露：避免在请求中泄露敏感信息，使用HTTPS确保数据传输的安全性。<br>
                                                XSS和CSRF攻击：确保你的应用程序对API的调用免受常见的安全攻击影响。<br>
                                            </div>
                                        </div>
                                    </el-row>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="错误码" name="5">
                                <el-row>
                                    <el-col :span="24" class="ErrorCode">
                                        <h5>常见错误码参照(error code):</h5>
                                        <div>
                                            <el-table :data="tableData">
                                                <el-table-column prop="code" label="错误码" width="180">
                                                </el-table-column>
                                                <el-table-column prop="remark" label="错误说明">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-col>
                                    <el-col :span="24" class="ErrorCode">
                                        <h5>服务错误码参照(error code):</h5>
                                        <div>
                                            <el-table :data="tableData2">
                                                <el-table-column prop="code2" label="错误码" width="180">
                                                </el-table-column>
                                                <el-table-column prop="remark2" label="错误说明">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-col>
                                    <el-row>
                                        <el-col :span="24">
                                            <div class="InterDocument">
                                                示例代码
                                            </div>
                                        </el-col>
                                        <el-row>
                                        <div class="InterDocBoxOne">
                                            <span class="InterDb1">完整示例代码分享：</span>
                                            <p class="InterDb3">NULL</p>
                                        </div>
                                        <div class="InterDocBoxOne">
                                            <span class="InterDb1">常见问题：</span>
                                            <div class="InterDb3">
                                                <h5>1.查阅文档</h5>
                                                检查该API或系统的文档，查找“Code 1”的具体含义和可能的解决方案。大多数服务会提供一个错误代码列表及其解释。<br>
                                                <h5>2.检查请求格式</h5>
                                                确保你的请求格式正确，包括请求头、参数和数据体的格式是否符合API的要求。有时自定义错误代码可能是由于请求格式错误引起的。<br>
                                                <h5>3.验证权限和认证</h5>
                                                如果你的请求需要认证或特定权限，确保你提供了正确的API密钥、令牌或其他认证信息。自定义错误代码可能与权限问题有关。<br>
                                                <h5>4.网络和服务状态</h5>
                                                确保你的网络连接正常，并且服务本身没有遇到故障。检查服务的状态页面或联系服务提供商以确认是否有系统维护或故障。<br>
                                                <h5>5.错误日志</h5>
                                                查看系统或应用的错误日志，这可能会提供更多关于“Code 1”的上下文信息。日志中可能会有更详细的错误信息和堆栈跟踪。<br>
                                                <h5>6.联系技术支持</h5>
                                                如果文档和自查不能解决问题，联系相关技术支持团队提供错误代码和详细的请求信息，以获得更具体的帮助。<br>
                                                <h5>7.重试请求</h5>
                                                有时，网络问题或瞬时服务问题可能导致错误代码。稍后重试请求可能会解决问题。<br>
                                            </div>
                                        </div>
                                    </el-row>
                                    </el-row>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="服务协议" name="6">
                                <el-row>
                                    <el-col :span="24">
                                        <h5>用户应当充分阅读本协议，用户使用锦锐短信API服务亦视为接受本协议。</h5>
                                        <br>
                                        <h5>一、定义</h5>
                                        <p>锦锐短信API服务：由锦锐提供的短信API服务。 用户： 以任何形式使用锦锐的自然人、法人或其他组织。</p>
                                        <br>
                                        <h5>二、用户保证</h5>
                                        <ol>
                                            <li>用户同意并保证，在本协议有效期内，锦锐有权于任何时间要求用户提交相关资质证明资料原件及/或其他资料信息，用户对其所提交信息的真实完整、合法有效性承担保证责任。
                                            </li>
                                            <li>用户同意并保证，合法并如约使用锦锐短信API服务。用户对其行为产生的任何法律责任自行独立承担，与锦锐无关。</li>
                                        </ol>
                                        <br>
                                        <h5>三、用户的权利与义务</h5>
                                        <ol>
                                            <li>用户有权就锦锐申请账号，用户注册账号，应向锦锐提供真实完整且合法有效的信息。
                                                如用户信息发生任何变更，用户应于变更后书面通知锦锐并提供最新资料信息。</li>
                                            <li>用户需要自行保管其帐号和密码。用户帐号、密码使用权仅属于初始申请注册人，禁止赠与、借用、租用、转让或者售卖，如果用户进行此类操作导致密码泄露造成损失的，锦锐并不承担责任。
                                            </li>
                                            <li>用户应按使用锦锐的实际发送数量，根据锦锐页面公布资费标准向锦锐支付相应的费用。 </li>
                                            <li> 用户保证其所提供的手机号码列表的真实性、合法性、有效性及许可性，用户有义务对手机列表进行筛选。否则锦锐有权随时终止本协议。</li>
                                            <li>用户在使用锦锐短信API服务期间，承诺并保证：
                                                <ol>
                                                    <li>遵守所有中华人民共和国法律法规和国际上有关互联网和短信的协议、规定、程序和惯例；</li>
                                                    <li>不利用锦锐短信API服务进行干扰或扰乱锦锐网络服务或其他正常使用；</li>
                                                    <li>不行使其他可能给锦锐带来任何不利影响的行为或者法律及政策禁止的行为。</li>
                                                </ol>
                                            </li>
                                            <li>用户不得利用锦锐短信API服务发送以下内容的短信：
                                                <ol>
                                                    <li>接受方事先没有提出要求或者同意接受的广告等宣传性或营销性内容；</li>
                                                    <li>含有病毒、恶意代码、色情、反动等不良信息或有害信息 </li>
                                                    <li>地产、医疗、教育、留学、移民等相关内容 </li>
                                                    <li>冒充任何人或机构，或以虚伪不实的方式谎称或使人误认为与任何人或任何机构有关。</li>
                                                    <li>侵犯他人著作权或其他知识产权，或违反保密、雇佣或不披露协议披露他人商业秘密或保密信息</li>

                                                </ol>
                                            </li>
                                            <li>用户应对相关数据自行存储和备份并至少保留六十日。根据锦锐或国家主管部门的要求，用户应向其提供备份内容。用户使用锦锐短信API服务，不得于任何时间任何事件中使用锦锐的Logo、服务标记、域名及其他具有锦锐显著特征的标识。
                                            </li>
                                            <li>用户应当按照本协议以及锦锐不时公布的规定，妥善使用锦锐短信API服务并为其行为负责。因用户行为导致锦锐遭受诉讼、索赔及/或处罚的，用户应赔偿锦锐因此造成的全部损失。
                                            </li>
                                            <li>本协议一经生效锦锐即有权永久免费使用用户的商业名称、商标、Logo等信息作为案例宣传锦锐旗下的相关服务。</li>
                                            <li>用户同意接收来自锦锐的邮件及短信，包括但不限于商业推广信息等。</li>



                                        </ol>
                                        <br>
                                        <h5>四、锦锐的权利与义务</h5>
                                        <ol>
                                            <li>锦锐对用户行为无审核监督义务。因用户行为给锦锐造成的一切损失，锦锐有权向用户追偿。 </li>
                                            <li>锦锐对其提供给用户的服务质量做出如下承诺：
                                                <ol>
                                                    <li>锦锐为客户发送的短信数量是真实可信的实际数量 </li>
                                                    <li>锦锐会向客户提供合理的建议和协助来帮助用户提高发送质量。 </li>
                                                    <li>锦锐会提供必要的客户投诉与答疑服务。</li>
                                                </ol>
                                            </li>

                                            <li>锦锐有权随时调整锦锐短信API服务的资费，但该调整不会对用户已购买的服务产生影响。 </li>
                                            <li>锦锐有权对锦锐短信API服务进行定期或不定期的升级或完善，但应提前在相关页面进行公告。如用户因此受到影响，锦锐无需为此承担任何责任。</li>
                                            <li> 锦锐有权根据自己的判断对用户是否违反本协议约定及锦锐短信API服务使用规则做出认定。用户若有违反的，锦锐有权随时中止或终止本协议。锦锐无需就此征得用户同意或提前通知用户。
                                            </li>
                                            <li>因非锦锐原因导致的本协议提前终止，用户已经支付而尚未使用的费用锦锐有权不予退还。</li>
                                            <li>鉴于互联网服务的特殊性，对因不可抗力、第三方服务、黑客攻击、政策影响及其他任何非锦锐原因引起的服务中断、数据丢失等，锦锐均无需承担任何责任。
                                            </li>

                                        </ol>
                                        <br>
                                        <h5>五、知识产权</h5>
                                        <ol>
                                            <li>锦锐服务中包含的任何文字、图表、音频、视频和/或软件（包括但不限于软件中包含的图表、动画、音频、视频、界面实际、数据和程序、代码、文档）等信息或材料均受著作权法、商标法或其它法律法规的保护，未经相关权利人书面同意，用户不得以任何方式使用该等信息或材料，但出于使用锦锐服务目的而使用的除外。
                                            </li>
                                            <li>除本协议明确允许的以外，用户不得以任何形式或任何方式对锦锐服务部分或全部内容进行修改、出租、租赁、出借、出售、分发、复制、创作衍生品或用于任何商业用途。
                                            </li>
                                            <li>用户使用锦锐发布的信息不得侵犯任何第三人的知识产权，未经相关权利人之事先书面同意，用户不得以任何方式上传、发布、修改、传播或复制任何受著作权保护的材料、商标或属于其他人的专有信息。
                                            </li>
                                            <li> 若您认为您的知识产权或其他合法权益被侵犯，请向锦锐提供以下资料：
                                                <ol>
                                                    <li> 对涉嫌侵权内容拥有知识产权或其他合法权益的权属证明； </li>
                                                    <li>权利人具体的主体资质和联络信息，包括个人的姓名、身份证或护照复印件、单位的营业执照复印件或者其他资质证明复印件、通信地址及电话号码等；
                                                    </li>
                                                    <li> 涉嫌侵权内容在本网站上的位置； </li>
                                                    <li> 对侵权情况的详细描述； </li>
                                                    <li>在权利通知中加入如下关于通知内容真实性的声明：“由以上操作所引起的一切后果，与锦锐无关，由我本人/公司承担。</li>
                                                </ol>
                                            </li>
                                        </ol>

                                        <br>
                                        <h5>六、 隐私权</h5>
                                        <ol>
                                            <li>保护用户的隐私是锦锐的一项基本政策。</li>
                                            <li>适用于用户的隐私的相关条款请参见 《隐私协议》</li>
                                        </ol>

                                        <br>
                                        <h5>七、 免责声明</h5>
                                        <ol>
                                            <li>鉴于网络服务的特殊性，锦锐不保证网络服务的绝对及时性、安全性和准确性，用户同意锦锐有权不经事先通知，随时变更、中断或终止部分或全部的网络服务而无论同意与否，锦锐对用户和任何第三人均无需承担任何责任。
                                            </li>
                                            <li>用户经由锦锐服务与广告商进行通讯联系或商业往来或参与促销活动，完全属于用户与广告商之间的行为，与锦锐没有任何关系，若因商业行为所产生之任何损害或损失，锦锐不承担任何责任。
                                            </li>
                                            <li>
                                                用户明确同意其使用锦锐服务所存在的风险及其后果将完全由其自己承担，锦锐对用户不承担任何责任。如因用户违反有关法律、法规或本协议项下的任何条款而给锦锐或任何其他第三人造成损失，用户同意承担由此造成的损害赔偿责任。
                                            </li>
                                        </ol>

                                        <br>
                                        <h5>八、其他</h5>
                                        <ol>
                                            <li>本协议的版权归锦锐，锦锐保留对本协议的一切解释和修改权利。
                                            </li>
                                            <li>本协议的订立、执行和争议的解决均应适用中华人民共和国法律。如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向锦锐所在地有管辖权的人民法院提起诉讼。
                                            </li>
                                            <li>锦锐行使本协议的任何权利或规定，不构成对前述权利之放弃。</li>
                                            <li> 如本协议中的任何条款完全或部分无效，本协议的其余条款仍有效并且有约束力。</li>
                                        </ol>

                                    </el-col>
                                </el-row>
                            </el-tab-pane>

                        </el-tabs>
                    </el-col>

                </el-row>

            </div>

        </div>


        <RegisterPage></RegisterPage>


    </Layout>
</template>

<script>
import Icon from '../components/icon/Icon'
import Layout from '../components/common/Layout'
import BlogPostMixin from '../mixins/BlogPostMixin'
import RegisterPage from '../components/register/register'

export default {
    name: 'BlogGridSidebarPage',
    components: { Icon, Layout, RegisterPage },
    mixins: [BlogPostMixin],
    data() {
        return {
            radio: 1,
            activeName: '1',
            activeNameTwo: '1',
            ChangeFre: [
                {
                    id: 1,
                    name: '10次',
                },
                {
                    id: 2,
                    name: '20次',
                },
                {
                    id: 3,
                    name: '50次',
                },
                {
                    id: 4,
                    name: '100次',
                }
            ],
            PDFBoxList: [
                {
                    id: 1,
                    news: '短信验证码 · 最优通道，优先发送',
                },
                {
                    id: 2,
                    news: '短信通知 · 独享通道，业务隔离',
                },
                {
                    id: 3,
                    news: '三网合一短信通道，3秒可达',
                },
                {
                    id: 4,
                    news: '电信级运营保障，99%到达率、支持大容量高并发',
                },
                {
                    id: 5,
                    news: '超低资费，多种阶梯套餐任意选择',
                }
            ],
            InterDocBoxOneList: [
                {
                    id: 1,
                    InterName: '请求Header:',
                    textContent: `  <p>
                                        Accept:application/json, text/plain, */*
                                        <br>
                                        Accept-Encoding:gzip, deflate, br, zstd
                                        <br>
                                        Accept-Language:zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
                                        <br>
                                        Connection:keep-alive
                                    </p>
                    `
                },
                {
                    id: 2,
                    InterName: '请求参数说明:',
                    textContent: `  <p>
                                        userId:用户ID
                                        <br>
                                        money:金额
                                        <br>
                                        productId:产品ID
                                        <br>
                                        token:用户标识
                                    </p>
                    `
                },
                {
                    id: 3,
                    InterName: '请求代码示例:',
                    textContent: `  async sendPostRequest() {<br>
     &nbsp; try {<br>
        &nbsp;&nbsp; &nbsp; &nbsp;const response = await axios.post('http://192.168.0.26:8888/order/creationOrder', {<br>
          &nbsp; &nbsp; &nbsp; key1: 'value1',<br>
           &nbsp; &nbsp; &nbsp;key2: 'value2'<br>
        });<br>
       &nbsp; &nbsp;} catch (error) {<br>
         &nbsp; &nbsp;console.error('Error:', error);<br>
      }<br>
                    `
                },
                {
                    id: 4,
                    InterName: '返回参数说明:',
                    textContent: `
                 {<br>
    &nbsp; &nbsp;"code": 200,<br>
    &nbsp; &nbsp;"msg": "查询成功",<br>
    &nbsp; &nbsp;"data": {<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"userId": 用户ID,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"username": 用户名,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"spid": 标识,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"mobile": 手机号,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"tkey": key值,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"balance": 余额,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"whiteIp": "IP",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"createTime": 时间,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"mark": 备注,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"params": "{\"role\":\"user\",\"warningSwitch\":false,\"chargeMode\":3,\"usageButton\":0,\"locking\":false,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"token": token,<br>
    &nbsp; &nbsp;}<br>
}<br>

                    `
                },
                {
                    id: 5,
                    InterName: 'JSON返回示例:',
                    textContent: `
                 {<br>
    &nbsp; &nbsp;"code": 200,<br>
    &nbsp; &nbsp;"msg": "查询成功",<br>
    &nbsp; &nbsp;"data": {<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"userId": 60,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"username": "17854259658",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"spid": "0",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"mobile": "17854259658",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"tkey": "5ucpvONWC6oo6Tf6rUp2Xi3MvzXEIWCb",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"balance": -293.0000000,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"quota": 0,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"whiteIp": ",0.0.0.0,",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"createTime": "2024-07-19 14:04:12 000",<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"mark": null,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"params": "{\"role\":\"user\",\"warningSwitch\":false,\"chargeMode\":3,\"usageButton\":0,\"locking\":false,<br>
        &nbsp; &nbsp;&nbsp; &nbsp;"token": null,<br>
    &nbsp; &nbsp;}<br>
}<br>

                    `
                },
            ],
            tableData: [
                {
                    code: '200',
                    remark: '请求成功，返回所请求的数据',
                },
                {
                    code: '301',
                    remark: '请求的资源已被永久移动到新URL，新的URL在响应头中提供',
                },
                {
                    code: '400',
                    remark: '请求格式错误或无效的请求参数。',
                },
                {
                    code: '403',
                    remark: '请求被禁止，通常是由于权限不足',
                },
                {
                    code: '500',
                    remark: '服务器遇到错误，无法完成请求',
                },
                {
                    code: '500',
                    remark: '服务器遇到错误，无法完成请求',
                },
            ],
            tableData2: [
                {
                    code2: '200',
                    remark2: '请求成功，返回所请求的数据。',
                },
                {
                    code2: '201',
                    remark2: '请求成功，并创建了新的资源（通常用于POST请求）',
                },
                {
                    code2: '204 ',
                    remark2: '请求成功，但没有返回内容（通常用于DELETE请求）',
                },
                {
                    code2: '301',
                    remark2: '请求的资源已被永久移动到新URL，新的URL在响应头中提供',
                },
                {
                    code2: '304',
                    remark2: '资源未被修改，可以使用缓存的版本',
                },
                {
                    code2: '400 ',
                    remark2: '请求格式错误或无效的请求参数',
                },
                {
                    code2: '400 ',
                    remark2: '请求格式错误或无效的请求参数',
                },
                {
                    code2: '401 ',
                    remark2: '请求未授权，需要提供有效的身份验证信息。',
                },
                {
                    code2: '404 ',
                    remark2: '请求的资源未找到。',
                },
                {
                    code2: '408 ',
                    remark2: '请求超时，服务器在等待请求时超时。',
                },
                {
                    code2: '500 ',
                    remark2: '服务器遇到错误，无法完成请求。',
                },
                {
                    code2: '501 ',
                    remark2: '服务器不支持请求的方法。',
                },
                {
                    code2: '504  ',
                    remark2: '作为网关或代理的服务器未能在预定时间内从上游服务器获得响应。',
                },
            ]
        }
    },
    created() {
        console.log(this.$route.fullPath, "路由")
    },
    methods: {
        gotozixun(){
            this.$router.push({
				    path: '/seekadfrom'
				})
        },
        ShowNow() {
            this.$router.push({
                path: '/product'
            })
        },
        NowRegister() {
            this.$router.push({
                path: '/register'
            })
        },
        gotopro(){
            this.$router.push({
                path: '/product'
            })
        }
    }
}
</script>
<style scoped lang="scss">
// 头部
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    height: 700px;
    /* background-color: #ccc; */
    background-image: url('../assets/images/banner/chanpindbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }


    .BannerBotBtn {
        display: flex;
        margin-bottom: 3%;

        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }

        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;
        
            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }
    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}


// 产品详情
.ProductDetails {
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;

    .PdtDetailTop {
        margin: 20px 0 50px 0;
        font-size: 16px;
        color: #3D3D3D;
    }

    .pdtdetSpan {
        color: #0457F2;
        font-weight: 400;
    }

    .PdtDetailLeft {
        img {
            width: 160px;
        }
    }

    .PdtDetailRight {
        .PDetailRTop {
            margin: 10px 0;
            display: flex;
            align-items: center;

            .PDRTopOne {
                color: #3D3D3D;
                font-weight: 600;
                font-size: 16px;
                margin: 0 20px 0 0;
            }

            .PDRTopTwo {
                display: inline-block;
                // width: 80px;
                height: 20px;
                border: 1px solid #ccc;
                border-radius: 5px;
                text-align: center;
                font-size: 12px;
                color: #fff;
                background-color: #74a5f8;
            }


        }
    }

    .PDRTopThree {
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
    }

    .PDRTopFour {
        height: 51px;
        background-color: #EBEBEB;
        display: flex;
        align-items: flex-end;
        padding: 5px 10px;
        box-sizing: border-box;

        .PDRTopFour-r {
            font-size: 12px;
            color: #F0483D;
        }

        .PDRTopFour-H {
            font-size: 30px;
            color: #F0483D;
            display: inline-block;
            height: 100%;
            margin: 0 5px 0 3px;
        }

        .PDRTopFour-buy {
            font-size: 12px;
            color: #666666;
        }
    }

    .PDRTopFive {
        margin: 10px 0px;
        display: flex;
        align-items: center;
    }

    ::v-deep .el-radio__inner {
        width: 0px;
        height: 0px;
        transition: all 0.3s ease;

    }

    ::v-deep .el-radio {
        margin: 0px 3px 0 5px;
    }

    ::v-deep .el-radio.is-bordered {
        width: 70px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        padding: 0;
        font-size: 12px;
        transition: all 0.3s ease;
    }

    ::v-deep .el-radio__label {
        padding-left: 0;
    }

    ::v-deep .el-radio.is-bordered.is-checked {
        background-image: url('../assets/images/banner/changebgc.png');
        background-size: 100% 100%;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    .PDRTopSix {
        width: 120px;
        height: 40px;
        margin: 10px 0;
        background-color: #0059FF;
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        cursor: pointer;
    }


    .ProDucFuntion {
        text-align: center;
        margin: 50px 0 20px 0;
        color: #3D3D3D;
        font-size: 36px;

    }

    .PrDuFunBox {
        width: 100%;
        background-image: url('../assets/images/banner/P-bgcri.png');
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 30%;

        .PrDuFunBOne {
            display: flex;
            align-items: center;
            margin: 10px 0;

            .pedu-a1 {
                color: #3D3D3D;
                font-size: 12px;
                font-weight: 400;
                margin: 0 5px;
            }
        }
    }

    // 措施建议
    .CuoShiJy {
        background-image: url('../assets/images/banner/cuoshijy.png');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 30%;
        color: #3D3D3D;
    }

    .CuoShiJyul {
        list-style-type: none;

        li::before {
            content: "●";
            color: #0059ff;
            display: inline-block;
            width: 1em;
            margin-right: 0.5em;
        }
    }

    .FunctExam {
        padding: 0% 21%;

        img {
            height: 300px;
        }
    }

    .BussScenario {
        padding: 0% 12%;
        margin-top: 30px;
    }

    .Business {
        padding: 0% 15%;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 80px;
        }

        h6 {
            margin: 10px 0;
        }
    }

    .StepBox {
        padding: 0% 15%;

        h5 {
            margin: 10px 0;
        }

        .StepBp {
            color: #3D3D3D;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .StepBp2 {
            color: #0457F2;
            font-size: 14px;
            margin-right: 5px;
        }
    }

    .GuateBox {
        display: flex;
        // align-items: center;
        padding: 0px 10%;

        img {
            width: 90px;
        }

        h6 {
            margin: 5px 0 10px 0;
        }

        .GuateBoxtip {
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    .InterDocument {
        text-align: center;
        margin: 50px 0 20px 0;
        color: #3D3D3D;
        font-size: 36px;

    }

    .InterDocBoxOne {
        font-size: 14px;
        margin: 5px 0 10px 0;
        font-family: Source Han Serif SC;

        .InterDb1 {
            color: #3D3D3D;
            font-weight: 700;
        }

        .InterDb2 {
            font-size: 12px;
            color: #7E7E7E;
        }

        .InterDb3 {
            background-color: #D8D8D8;
            // height: 100px;
            padding: 5px 5px;
        }
    }

    ::v-deep .el-table__header-wrapper table {
        margin: 0;
    }

    .ErrorCode {
        margin: 20px 0;
    }

}


// tab 样式
::v-deep .el-tabs__nav-scroll {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;

}

::v-deep .el-tabs__nav {
    margin: 0px auto;
}

::v-deep .el-tabs__item {
    color: #3D3D3D;
    font-size: 18px;
}

::v-deep .el-tabs__nav-wrap::after {
    height: 0px;
}

::v-deep .el-tabs__item.is-active {
    color: #0059FF;
    font-size: 22px;
}

::v-deep .el-tabs__active-bar {
    background-color: #0059FF;
}
</style>